<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="130px">
                <el-form-item label="创建时间" class="piker">
					<el-date-picker
						v-model="queryParams.create_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
				<el-form-item label="账户状态">
					<el-select
						class="w-60"
						v-model="queryParams.status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0"/>
						<el-option label="启用" :value="1"/>
						<el-option label="冻结" :value="2"/>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.phone"
						clearable
					/>
				</el-form-item>
                <el-form-item label="名称">
					<el-input
						class="w-[240px]"
						v-model="queryParams.username"
						clearable
					/>
				</el-form-item>
                <el-form-item label="账号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.account"
						clearable
					/>
				</el-form-item>
				
				<el-form-item class="w-80">
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" prop="order_id" min-width="90" />
				<el-table-column label="户名" prop="username" min-width="180" />
				<el-table-column label="账号" prop="account" min-width="220" />
				<el-table-column label="手机号" prop="phone" min-width="160" />
                <el-table-column label="余额" prop="s_integral" min-width="200" />
                <el-table-column label="创建时间" prop="create_time" min-width="180" />
                <el-table-column label="账户状态" prop="can_use" min-width="120">
					<template #default="{ row }">
						<span v-if="row.can_use == 0">冻结</span>
						<span v-if="row.can_use == 1">启用</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" fixed="right">
					<template #default="{ row }">
						<!-- @click="handleSure(row.user_id)" -->
						<el-button v-perms="['user.integral/integralList']" type="primary" link @click="handleSure(row.account )">
							账户明细
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="accountList">
	import { accountList, setNoticeConfig } from '@/api/operation';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import {getRoutePath} from '@/router'
	const queryParams = reactive({
		create_time: '',
		status: '',
		phone: '',
        username: '',
        account: ''
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: accountList,
		params: queryParams
	})
    //账户流水
	const router = useRouter()
    const handleSure = async (account : string) => {
		console.log('handleSure')
		window.localStorage.setItem('count', '0')
		router.push({
			path: getRoutePath('user.integral/integralList'),
			query: {
				account
			}
		})
	}
    //启用
	const handleEnable = async (id: number) => {
		try{
			await feedback.confirm('账户启用之后，将恢复至正常状态，确认是否启用？', '启用','success')
			await setNoticeConfig({id, status: 1});
			getLists();
		}catch(error){
			console.log(error)
		}
	}
	//冻结
	const handleFreeze = async (id: number) => {
		try{
			await feedback.confirm('账户冻结之后，将不能进行积分获取、消耗等除了启用之外的所有操作和业务，确认是否冻结？', '冻结','error')
			await setNoticeConfig({id, status: 0});
			getLists();
		}catch(error){
			console.log(error)
		}
       
	}
    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	getLists()
</script>
<style lang="scss" scoped>
.piker{
    width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}

</style>